<template>
  <div class="detailImage">
    <div class="detailFloor" v-for="(item,index) in detailImage" :key="index">
      <div class="deImgDesc">
        <div class="decorate">
          <span class="deLine"></span>
          <span class="deSquare"></span>
        </div>
        <div
          class="deText"
          :title="detailImageDesc"
        >{{detailImageDesc == "" ? '暂无描述' : detailImageDesc}}</div>
        <div class="decorate">
          <span class="deSquare"></span>
          <span class="deLine"></span>
        </div>
      </div>
      <div class="deKey">{{item.key}}</div>
      <div class="deImgList">
        <img
          v-for="(imgItem,index) in item.list"
          ref="imgs"
          :key="index"
          v-lazy="imgItem"
          @load="detailImgLoad"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailImage",
  props: {
    detailImage: {
      type: Array,
      default() {
        return [];
      }
    },
    detailImageDesc: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      imgLoadCount: 0
    };
  },
  methods: {
		// 监听图片加载，因为使用了懒加载，所以要判断当前路径是否为懒加载的图片路径，当不是时，说明图片加载完成
    detailImgLoad() {
      if (
        this.$refs.imgs.every(
          item =>
            item.currentSrc !== "http://localhost:8080/img/loading.32ad9563.gif"
        )
      ) {
        this.$emit("detailImgLoad");
      }
    }
  }
};
</script>

<style scoped>
.detailImage {
  padding: 6px;
  /* background-color: #dbd7d7; */
}
.deImgDesc {
  position: relative;
  background-color: #fff;
  padding-bottom: 10px;
}
.deImgDesc .deText {
  padding-top: 15px;
  font-size: 14px;
  text-indent: 14px;
  line-height: 20px;
  /* 文字渐变色 */
  background: linear-gradient(to right, green, red);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.deImgDesc .decorate {
  position: absolute;
  overflow: hidden;
}
.deImgDesc .decorate:nth-of-type(3) {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.deImgDesc .decorate:nth-of-type(1) {
  position: absolute;
  bottom: 2px;
  right: 0;
  overflow: hidden;
}
.decorate > span {
  float: left;
}
.decorate .deSquare {
  width: 6px;
  height: 6px;
  background-color: black;
}
.decorate .deLine {
  width: 100px;
  height: 2px;
  margin-top: 4px;
  background-color: #ccc;
}
/* 穿着效果 */
.detailFloor .deKey {
  margin: 10px 0;
  font-weight: bold;
  color: black;
}
/* 图片展示 */
.deImgList {
  width: 100%;
}
.deImgList > img {
  width: 100%;
}
</style>
